<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>派车单操作</title>
    <link rel="stylesheet" type="text/css" href="../../static/layui/css/layui.css"/>
    <script type="text/javascript" src="../../static/layui/layui.js"></script>
    <link rel="stylesheet" href="../../static/css/common.css">
    <link rel="stylesheet" href="../../static/css/index.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
</head>
<body>
<!-- 菜单栏 -->
<link rel="stylesheet" href="../../static/css/index.css">
<ul>
    <div th:each="item:${menuList}" class="display:inline-de">
        <li><a th:href="@{${item.path}}" th:text="${item.name}"></a></li>
    </div>
    <a th:href="@{/login}" style="float:right;font-size: 16px;margin: 17px;color: white;">> 登出</a>
</ul>
<from lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style type="text/css">
            .box {
                width: 800px;
                margin: 50px auto;
                border: 1px solid #DCDFE6;
                border-radius: 20px;
                padding: 20px;
            }

            .box:hover {
                box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
            }

            .box-title {
                text-align: center;
            }

            .box-table {
                margin-top: 20px;
            }
            .box-nav{
                text-align: center;
            }
        </style>
    </head>
    <body>
    <!--创建一个表单-->
    <input type="hidden" name="_method" value="delete">
    <div class="box" style="width: 1200px">

        <h1 class="t">我的派车单</h1>
        <div class="form-group">
            <table class="table table-bordered box-table">
                <tr>
                    <th>编号</th>
                    <th>火车牌号</th>
                    <th >货物内容</th>
                    <th>重量</th>
                    <th>状态</th>
                    <th>始发地点</th>
                    <th>目标地点</th>
                    <th>到达站点</th>
                    <th>意外成本</th>
                    <th style="width: 300px">操作</th>
                </tr>
                <tr th:each="driverTruckOrder : ${driverTruckOrders}" >
                    <td th:text="${driverTruckOrder.id}"></td>
                    <td th:text="${driverTruckOrder.truckId}"></td>
                    <td th:text="${driverTruckOrder.goods}"></td>
                    <td th:text="${driverTruckOrder.weight}"></td>
                    <td th:switch="${driverTruckOrder.state}">
                        <span th:case="3">未揽收</span>
                        <span th:case="4">已揽收</span>
                        <span th:case="5">在途</span>
                        <span th:case="6">到达</span>
                    </td>
                    <td th:text="${driverTruckOrder.shippingOrder.start}"></td>
                    <td th:text="${driverTruckOrder.shippingOrder.target}"></td>
                    <td th:text="${driverTruckOrder.location}"></td>
                    <td th:text="${driverTruckOrder.unexpectedCost}"></td>
                    <td>
                        <div class="layui-btn-container">
                            <button th:if="${driverTruckOrder.state eq 3}" class="layui-btn" th:onclick="|operate(3,${userId},${driverTruckOrder.id})|">揽收</button>
                            <button th:if="${driverTruckOrder.state eq 4}" class="layui-btn" th:onclick="|operate(4,${userId},${driverTruckOrder.id})|">发车</button>
                            <button th:if="${driverTruckOrder.state eq 5}" class="layui-btn" th:onclick="|operate(6,${userId},${driverTruckOrder.id})|">到达</button>
                            <button th:name="${driverTruckOrder.id}" th:if="${driverTruckOrder.state eq 5}" class="layui-btn" test-active="Location">到达新站点</button>
                            <button th:if="${driverTruckOrder.state ne 6}" th:name="${driverTruckOrder.id}" class="layui-btn" test-active="unexpectedCost">意外</button>
                        </div>
                    </td>
                </tr>
            </table>
        </div>

    </div>
    </form>
    </body>
</from>
<script>
    function operate(state,operator,id){
        let data = {
            state : state,
            operator : operator,
            id : id
        }
        console.log(data)
        $.ajax({
            type: "post",
            url: "/driver/driverOperate",
            data: data,
            complete:function(){
                console.log('你输出吗')
                location.reload();
            }
        });
    }
    layui.use(function(){
        const layer = layui.layer
            , form = layui.form
            , util = layui.util
            , userId = [[${userId}]]
            ;


        //触发事件
        util.on('test-active', {
            'Location': function(data){
                let orderId = data.context.name
                layer.open({
                    type: 1
                    ,resize: false
                    ,shadeClose: true
                    ,area: '350px'
                    ,title: '添加到达站点信息'
                    ,content: ['<form class="layui-form layui-form-pane" style="margin: 15px;">'
                        ,'<li class="layui-form-item">'
                        ,'<label class="layui-form-label" >到达站点</label>'
                        ,'<div class="layui-input-block">'
                        ,'<input class="layui-input" th:value="${location}" name="location">'
                        ,'</div>'
                        ,'</li>'
                        ,'<li class="layui-form-item" style="text-align:center;">'
                        ,'<button  lay-submit="" lay-filter="saveLocation" class="layui-btn">提交</button>'
                        ,'</li>'
                        ,'</form>'].join('')
                    ,success: function(layero, index){
                        layero.find('.layui-layer-content').css('overflow', 'visible');
                        form.render().on('submit(saveLocation)', function(data){
                            data.field.state = 5;
                            data.field.operator = userId;
                            data.field.id = orderId;
                            $.ajax({
                                type: "post",
                                url: "/driver/driverOperate",
                                data: data.field,
                                success:function (result) {
                                    window.parent.location.reload();
                                    layer.closeAll();
                                }
                            });
                            return false;
                        });
                    }
                });
            },
            'unexpectedCost': function(data){
                let orderId = data.context.name
                layer.open({
                    type: 1
                    ,resize: false
                    ,shadeClose: true
                    ,area: '350px'
                    ,title: '上报意外情况'
                    ,content: ['<form class="layui-form layui-form-pane" style="margin: 15px;">'
                        ,'<li class="layui-form-item">'
                        ,'<label class="layui-form-label">意外信息</label>'
                        ,'<div class="layui-input-block">'
                        ,'<input class="layui-input" th:value="${unexpectedInfo}" name="unexpectedInfo">'
                        ,'</div>'
                        ,'<li class="layui-form-item">'
                        ,'<label class="layui-form-label">意外成本</label>'
                        ,'<div class="layui-input-block">'
                        ,'<input class="layui-input" th:value="${unexpectedPrice}" name="unexpectedPrice">'
                        ,'</div>'
                        ,'</li>'
                        ,'<li class="layui-form-item" style="text-align:center;">'
                        ,'<button  lay-submit="" lay-filter="saveUnexpectedCost" class="layui-btn">提交</button>'
                        ,'</li>'
                        ,'</form>'].join('')
                    ,success: function(layero, index){
                        layero.find('.layui-layer-content').css('overflow', 'visible');
                        form.render().on('submit(saveUnexpectedCost)', function(data){
                            data.field.state = 7;
                            data.field.operator = userId;
                            data.field.id = orderId;
                            $.ajax({
                                type: "post",
                                url: "/driver/driverOperate",
                                data: data.field,
                                success:function (result) {
                                    window.parent.location.reload();
                                    layer.closeAll();
                                }
                            });
                            return false;
                        });
                    }
                });
            }
        });

    });
</script>
</body>
</html>
